<template>
  
  <div style="display:flex;width:100%;height:100%;flex-direction:column">
    <h3 style="color:#000;padding:15px">项目图片以及详细介绍设置</h3>
    <div style="display:flex;width:100%;height:100%;">
      <div style="width:50%;padding:10px;box-sizing:border-box">
        <el-card :body-style="{ padding: '0px',height: '100%',display: 'flex','flex-direction': 'column' }" style="margin: 0 auto;height: 100%;">
              <p style="padding: 5px 15px;font-size: 14px;color:#606266">图片缩略图</p>
              
              <el-upload class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false" :on-change="changeImg">
                <img v-if="thumbnail" :src="thumbnail" class="avatar">
                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
              </el-upload>

              <p style="padding: 5px 15px;font-size: 14px;color:#606266">项目banner介绍</p>

              <div>
                <el-upload class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false" :on-change="changeFbanner" style="width: 375px;height:180px;padding: 10px;">
                  <img v-if="fbanner" :src="fbanner" class="avatar-logo">
                  <i v-else class="el-icon-plus avatar-uploader-icon-logo"></i>
                </el-upload>
                <el-upload class="avatar-uploader" action="" :show-file-list="false" :auto-upload="false" :on-change="changeSbanner" style="width: 375px;height:180px;padding: 10px;">
                  <img v-if="sbanner" :src="sbanner" class="avatar-logo">
                  <i v-else class="el-icon-plus avatar-uploader-icon-logo"></i>
                </el-upload>
              
              </div>
                
            </el-card>
      </div>
      <div style="width:50%;padding:10px;box-sizing:border-box">
        
        <el-card :body-style="{ padding: '0px',height: '100%',display: 'flex','flex-direction': 'column'}" style="margin: 0 auto;height: 100%;">
          <p style="padding: 5px 15px;font-size: 14px;color:#606266">项目banner介绍</p>
              <quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" style="height:100%;display: flex;flex-direction: column;">
              </quill-editor>
            </el-card>
      </div>
    </div>
    <div style="padding: 14px;width: 100%;box-sizing: border-box;background: rgba(0, 0, 0, 0.3);">
      <span>项目详情设置</span>
      <div class="bottom clearfix">
        <time style="font-size: 12px">目前主要用于小程序的展现</time>
        <el-button type="primary" size="mini" style="float:right" @click="saveBody" :loading="loading">保存</el-button>
      </div>
    </div>

  </div>
  
  

</template>
<script>
  // import C from '@/common/common.js'
  import AdminEdit from '@/service/organization/adminEdit.js'
  import * as qiniu from 'qiniu-js'
  import C from '@/common/common.js'
  import {
    quillEditor
  } from 'vue-quill-editor'
  import 'quill/dist/quill.core.css'
  import 'quill/dist/quill.snow.css'
  import 'quill/dist/quill.bubble.css'
  const toolbarOptions = [
    ['bold', 'italic', 'underline', 'strike', 'blockquote', 'code-block', {
      'list': 'ordered'
    }, {
      'list': 'bullet'
    }, {
      'indent': '-1'
    }, {
      'indent': '+1'
    }, {
      'align': []
    }, {
      'color': []
    }, {
      'background': []
    }, 'image', {
      'size': ['small', false, 'large', 'huge']
    }, {
      'header': [1, 2, 3, 4, 5, 6, false]
    }, 'clean'] // toggled buttons
  ]
  export default {
    data () {
      let that = this
      return {
        thumbnail: '',
        imagefile: '',
        fbanner: '',
        sbanner: '',
        fbannerFile: '',
        sbannerFile: '',
        loading: false,
        content: '',
        editorOption: {
          modules: {
            toolbar: {
              container: toolbarOptions, // 工具栏
              handlers: {
                'image': function (value) {
                  if (value) {
                    // 打开图片窗口
                    const {
                      dialog
                    } = require('electron').remote
                    dialog.showOpenDialog({
                      filters: [{
                        name: 'Images',
                        extensions: ['jpg', 'jpeg', 'png', 'gif']
                      }]
                    }, async (files) => {
                      if (files) {
                        console.log(files)
                        const fs = require('fs')
                        let file = fs.readFileSync(files[0])
                        console.log(file)
                        file = new Blob([file])
                        console.log(file)
                        if (file.size / (1024 * 1024) > 2) {
                          that.$message.error('上传图片大于2M')
                          return false
                        }
                        let token = await AdminEdit.getToken({})
                        let name = files[0].split('\\').pop()
                        let keyName =
                          new Date().getFullYear() +
                          '/' +
                          (new Date().getMonth() + 1) +
                          '/' +
                          new Date().getDate() +
                          '/' +
                          name
                        let observable = qiniu.upload(file, keyName, token.uptoken)
                        observable.subscribe({
                          next (res) {
                            console.log(res)
                          },
                          error (err) {
                            if (err) {
                              console.log(err)
                            }
                            that.$message.error('上传失败！')
                          },
                          complete (res) {
                            console.log(res)
                            // 上传成功后开始提交表格
                            let asd = `http://pde4eshzp.bkt.clouddn.com/${res.key}`
                            // that.submitForm()
                            let quill = that.$refs.myQuillEditor.quill
                            let length = quill.getSelection().index
                            quill.insertEmbed(length, 'image', asd)
                            quill.setSelection(length + 1)
                          }
                        })
                      }
                    })
                  } else {
                    this.quill.format('image', false)
                  }
                }
              }
            }
          }
        }
      }
    },
    async mounted () {
      let res = await C.ajax('/organization/subject/getSubjectInfo', {id: C.getDatas().id})
      this.thumbnail = res.thumbnail
      this.fbanner = res.banner.fbanner
      this.sbanner = res.banner.sbanner
      this.content = res.desc
    },
    methods: {
      async changeImg (file, fileList) {
        console.log(file)
        const isJPG =
          file.raw.type === 'image/jpeg' ||
          file.raw.type === 'image/png' ||
          file.raw.type === 'image/gif'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG) {
          this.$message.error('上传头像图片格式错误!')
          return
        }
        if (!isLt2M) {
          this.$message.error('上传头像图片大小不能超过 1MB!')
          return
        }
        this.imagefile = file
        this.thumbnail = file.url
      },
      async changeFbanner (file, fileList) {
        const isJPG =
          file.raw.type === 'image/jpeg' ||
          file.raw.type === 'image/png' ||
          file.raw.type === 'image/gif'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG) {
          this.$message.error('上传图片格式错误!')
          return
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB!')
          return
        }
        this.fbannerFile = file
        this.fbanner = file.url
      },
      async changeSbanner (file, fileList) {
        const isJPG =
          file.raw.type === 'image/jpeg' ||
          file.raw.type === 'image/png' ||
          file.raw.type === 'image/gif'
        const isLt2M = file.size / 1024 / 1024 < 1
        if (!isJPG) {
          this.$message.error('上传图片格式错误!')
          return
        }
        if (!isLt2M) {
          this.$message.error('上传图片大小不能超过 1MB!')
          return
        }
        this.sbannerFile = file
        this.sbanner = file.url
      },
      async saveBody () {
        // 根据图片判断是否请求token
        let that = this
        this.loading = true
        if (this.imagefile.name) {
          // 开始获取上传的token
          let token = await AdminEdit.getToken({})
          let keyName =
            new Date().getFullYear() +
            '/' +
            (new Date().getMonth() + 1) +
            '/' +
            new Date().getDate() +
            '/' +
            this.imagefile.name
          let observable = qiniu.upload(this.imagefile.raw, keyName, token.uptoken)
          that.thumbnail = await new Promise((resolve, reject) => {
            observable.subscribe({
              error (err) {
                if (err) {
                  console.log(err)
                }
                that.loading = false
                that.$message.error('上传失败！')
              },
              complete (res) {
                // 上传成功后开始提交表格
                resolve(`http://pde4eshzp.bkt.clouddn.com/${res.key}`)
              }
            })
          })
        }

        if (this.fbannerFile.name) {
          let token = await AdminEdit.getToken({})
          let keyName =
            new Date().getFullYear() +
            '/' +
            (new Date().getMonth() + 1) +
            '/' +
            new Date().getDate() +
            '/' +
            this.fbannerFile.name
          let observable = qiniu.upload(this.fbannerFile.raw, keyName, token.uptoken)
          that.fbanner = await new Promise((resolve, reject) => {
            observable.subscribe({
              error (err) {
                if (err) {
                  console.log(err)
                }
                that.loading = false
                that.$message.error('上传失败！')
              },
              complete (res) {
                // 上传成功后开始提交表格
                resolve(`http://pde4eshzp.bkt.clouddn.com/${res.key}`)
              }
            })
          })
        }

        if (this.sbannerFile.name) {
          let token = await AdminEdit.getToken({})
          let keyName =
            new Date().getFullYear() +
            '/' +
            (new Date().getMonth() + 1) +
            '/' +
            new Date().getDate() +
            '/' +
            this.sbannerFile.name
          let observable = qiniu.upload(this.sbannerFile.raw, keyName, token.uptoken)
          that.sbanner = await new Promise((resolve, reject) => {
            observable.subscribe({
              error (err) {
                if (err) {
                  console.log(err)
                }
                that.loading = false
                that.$message.error('上传失败！')
              },
              complete (res) {
                // 上传成功后开始提交表格
                resolve(`http://pde4eshzp.bkt.clouddn.com/${res.key}`)
              }
            })
          })
        }

        let data = {
          thumbnail: this.thumbnail,
          banner: {
            fbanner: this.fbanner,
            sbanner: this.sbanner
          },
          desc: this.content,
          subjectid: C.getDatas().id
        }

        console.log(data)
  
        let res = await C.ajax('/organization/subject/saveSubjectInfo', data, 'post')
        that.loading = false
        if (res) {
          this.$message.success(res.data)
        } else {
          this.$message.error(res.data)
        }
      }
    },
    components: {
      quillEditor
    }
  }
</script>

<style>
  .avatar-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 100px;
    height: 100px;
    line-height: 100px;
    text-align: center;
  }
  .avatar {
    width: 100px;
    height: 100px;
    display: block;
  }

  .avatar-uploader{
    display: flex;
    justify-content: center;
  }










  .avatar-uploader-icon-logo {
    font-size: 28px;
    color: #8c939d;
    width: 375px;
    height: 180px;
    line-height: 180px;
    text-align: center;
  }

  .avatar-logo {
    width: 375px;
    height: 180px;
    display: block;
  }
  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409eff;
  }
  .my-div {
    color: #000;
  }
  .ql-container.ql-snow {
      overflow: auto;
  }
  .ql-toolbar.ql-snow .ql-formats {
      margin-right: 0px;
  }

  .ql-toolbar.ql-snow{
    border: none
  }
  .ql-container.ql-snow{
    border: none
  }
</style>
